<template>
  <div>
    <v-chart class="chart" :option="option" style="width:800px" />
  </div>
</template>

<script>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";
import { ref, defineComponent } from "vue";

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent
]);

export default defineComponent({
  name: "HelloWorld",
  components: {
    VChart
  },
  props:["datalist"],
  provide: {
    [THEME_KEY]: "white"
  },
  setup (props) {
    console.log(props.datalist)
    const option = ref({
      xAxis: {
        name:"字数中位数",
        type: 'category',
        data: Object.keys(props.datalist),
    },
    yAxis: {
        name:"人次",
        type: 'value'
    },
    series: [{
        data: Object.values(props.datalist),
        type: 'bar'
    }]
    });

    return { option };
  }
});
</script>
<style>
.chart {
  height: 400px;
}
</style>
